<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>

    <title>局部组件</title>

    <style>
        .tabClass {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">

    </div>

    <template id="main">
        <firstvue :class="tabFlag==true ? '' : 'tabClass'"></firstvue>
        <hr>
        <twovue :class="tabFlag==true ? 'tabClass' : ''"></twovue>

        <button @click="tabChange()">切换显示</button></span><br>
    </template>

    <template id="first">
        <div class="red">
            {{firstName}}
            <h1>{{ name }}</h1>
            <span>阅读次数{{ num }}遍<button @click="read()">阅读</button></span><br>
            <div>大江东去，浪淘尽，千古风流人物。</div>
            <div>故垒西边，人道是，三国周郎赤壁。</div>
            <div>乱石穿空，惊涛拍岸，卷起千堆雪。</div>
            <div>江山如画，一时多少豪杰。</div>
            <div>遥想公瑾当年，小乔初嫁了，雄姿英发。</div>
            <div>羽扇纶巾，谈笑间，樯橹灰飞烟灭。</div>
            <div>故国神游，多情应笑我，早生华发。</div>
            <div>人生如梦，一尊还酹江月。</div>
        </div>

    </template>

    <template id="two">
        <div class="blue">
            {{twoName}}<br>
            <br>
            大江之水滚滚不断向东流去，淘尽了那些千古风流的人物。千古英雄人物。那旧营垒的西边，人们说是，三国周瑜破曹军的赤壁。陡峭的石壁直耸云天，如雷的惊涛拍击着江岸，激起的浪花好似卷起千万堆白雪。雄壮的江山奇丽如图画，一时间涌现出多少英雄豪杰。遥想当年的周瑜春风得意，绝代佳人小乔刚嫁给他，他英姿奋发豪气满怀。手摇羽扇头戴纶巾，从容潇洒地在说笑闲谈之间，就把强敌的战船烧得灰飞烟灭。我今日神游当年的战地，可笑我多情善感，过早地生出满头白发。人生犹如一场梦，举起酒杯奠祭这万古的明月。
        </div>
    </template>
</body>


<script type="module">

    let firstConfig = {
        template: '#first',
        data() {
            return {
                firstName: 'first',
                num: 0
            }
        },
        
        methods: {
            read() {
                this.num++;
            }
        }
    };
    let twoConfig = {
        template: '#two',
        data() {
            return {
                twoName: 'two'
            }
        }
    };
    let config = {
        template: '#main',
        data() {
            return {
                name: '念奴娇·赤壁怀古',
                num: 0,
                tabFlag: true,
            }
        },
        methods: {
            tabChange() {
                this.tabFlag = !this.tabFlag;
            }
        },
        //注册局部组件
        components: {
            firstvue: firstConfig,
            twovue: twoConfig
        }
    };
    let app = Vue.createApp(config);
    //调用component方法挂载全局组件
    let vm = app.mount("#app");
    //app.config.productionTip = true;

</script>

</html>